<template>
  <div ref="markerWrap" class="floor-marker" v-loading="loading">
    <div
      class="floor-marker-img"
      :style="{
        width: size.width + 'px',
        height: size.height + 'px',
      }"
      @click.stop.prevent="markAction"
      v-if="size.width > 0"
    >
      <img :src="img" />
      <div
        v-for="(item, index) in coordList"
        :key="index"
        @click.stop.prevent="onMarkerClick"
      >
        <div
          :style="{
            left: item.x * ratio + 'px',
            top: item.y * ratio + 'px',
          }"
          class="marker-item"
          :class="{ warn: item.isWarn, offline: item.isWarn == 'offline' }"
          v-if="item.x && item.y"
        >
          <span class="marker"></span>
          <p class="name">{{ item.deviceName }}</p>
        </div>
      </div>
      <div
        class="marker-item"
        v-if="newMarker"
        :style="{
          left: newMarker.x * ratio + 'px',
          top: newMarker.y * ratio + 'px',
        }"
        @click.stop.prevent="onMarkerClick"
      >
        <span class="marker"></span>
        <p class="name">{{ activeDevice.deviceName }}</p>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      size: {
        width: 0,
        height: 0,
      },
      ratio: 1,
      newMarker: null,
    };
  },
  props: {
    img: {
      type: String,
      default: "",
    },
    markable: {
      type: Boolean,
      default: false,
    },
    height: {
      type: String,
      default: "",
    },
    coordList: {
      type: Array,
      default() {
        return [];
      },
    },
    activeDevice: {
      type: Object,
      default() {
        return null;
      },
    },
  },
  watch: {
    img() {
      this.size.width = 0;
      this.size.height = 0;
      this.computeSize();
    },
  },
  created() {
    this.computeSize();
    if (this.activeDevice) {
      this.newMarker = this.activeDevice;
    }
  },
  methods: {
    getImgSize(src) {
      return new Promise((resolve, reject) => {
        const img = new Image();
        img.src = src;
        img.onload = (e) => {
          resolve({
            width: img.width,
            height: img.height,
          });
        };
      });
    },
    async computeSize() {
      this.loading = true;
      const imgSize = await this.getImgSize(this.img);
      let $markerWrap = this.$refs.markerWrap;
      const wrapSize = {
        width: $markerWrap.offsetWidth,
        height: $markerWrap.offsetHeight,
      };
      const wRatio = wrapSize.width / imgSize.width;
      const hRatio = wrapSize.height / imgSize.height;
      this.ratio = this.height == "auto" ? wRatio : Math.min(wRatio, hRatio);
      this.size.width = imgSize.width * this.ratio;
      this.size.height = imgSize.height * this.ratio;
      this.loading = false;
    },
    markAction(e) {
      if (!this.markable) return;
      const { offsetX, offsetY } = e;
      this.newMarker.x = Math.floor(offsetX / this.ratio);
      this.newMarker.y = Math.floor(offsetY / this.ratio);
    },
    onMarkerClick() {
      return;
    },
    getNewMarker() {
      return this.newMarker;
    },
  },
};
</script>
<style lang="less" scoped>
.floor-marker-img {
  width: 100%;
  position: relative;
  margin: 0 auto;
  overflow: hidden;
  & > img {
    width: 100%;
    height: 100%;
    user-select: none;
    pointer-events: none;
  }
  .marker-item {
    position: absolute;
    width: 10px;
    height: 10px;
    z-index: 2;
    margin-top: -5px;
    margin-left: -5px;
    &.warn {
      & > .marker {
        background: #e81818;
      }
      & > .name {
        color: #e81818;
      }
    }
    &.offline {
      & > .marker {
        background: #6a6a6a;
      }
      & > .name {
        color: #6a6a6a;
      }
    }
    & > .marker {
      display: block;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background: #00f3ff;
    }
    & > .name {
      position: absolute;
      top: 10px;
      left: 50%;
      width: 200px;
      margin-left: -100px;
      text-align: center;
      color: #00f3ff;
      font-size: 12px;
      line-height: 1.2;
    }
  }
}
</style>
